<template>
	<el-container>
		<el-main class="nopadding">
			<scCell ref="table" :pageSize="20" :apiObj="apiObj" remoteSort remoteFilter>
				<template #first>
					<div class="card-add">
						<div class="add-box">
							<el-icon color="#666" size="18">
								<Plus />
							</el-icon>
							<span>创建函数</span>
						</div>
					</div>
				</template>
				<template #default="{ row }">
					<div class="card-box">
						<div class="title">
							<div class="left">
								<span class="icon-box">
									<el-icon size="22" color="#fff">
										<Eleme />
									</el-icon>
								</span>
								<div class="name-box">
									<div class="name">口腔知识</div>
									<span> 创建者: admin</span>
								</div>
							</div>
							<div class="delete-button">
								<span class="el-tag el-tag--primary el-tag--light blue-tag" style="height: 22px;">
									<span class="el-tag__content">通用型</span>
								</span>
							</div>
						</div>
						<div class="content">口腔知识数据库</div>
					</div>
					<!-- {{ row }} -->
				</template>
			</scCell>
		</el-main>
	</el-container>
</template>

<script>
export default {
	data() {
		return {
			apiObj: this.$API.bole.ct.patient,
			tableData: [{
				date: '2016-05-03',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-02',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-04',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			{
				date: '2016-05-01',
				name: 'Tom',
				address: 'No. 189, Grove St, Los Angeles',
			},
			]
		}
	},
	async created() {
		const that = this
		let tableData = await this.$API.bole.ct.patient.get()
		console.log(tableData.data)
	},
	methods: {

	}
}
</script>

<style scoped lang="scss">
.card-box {
	font-size: 14px;
	position: relative;
	min-height: var(--card-min-height);
	min-width: var(--card-min-width);
	border-radius: 8px;
	border: 1px solid #eee;
	padding: 15px;
	margin-bottom: 20px;
	transition: .3s;
}

.card-box:hover {
	box-shadow: 0px 2px 4px 0px rgba(31, 35, 41, .12);
	cursor: pointer;
}

.icon-box {
	border-radius: 6px;
	background-color: #3370ff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
}

.title {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	// align-items: center;

	.left {
		display: flex;
		flex-direction: row;
		align-items: center;

		.icon-box {
			margin-right: 10px;
		}

		.name-box {
			.name {
				font-size: 14px;
				color: #333;
			}

			span {
				color: #999;
				font-size: 12px;
			}
		}
	}
}

.content {
	line-height: 22px;
	font-size: 14px;
	color: #777;
	margin-top: 10px;
}

.card-add{
	display: flex;
	height: 100%;
	padding-bottom: 20px;
	
	.add-box{
		cursor: pointer;
		display: flex;
		height: 100%;
		width: 100%;
		align-items: center;
		justify-content: center;
		border: 1px dashed #dee0e3;
		background-color: #eff0f1;
		border-radius: 8px;
	}
}
</style>
